<template>
	<view>
		<view class="padding-30">
			<view class="flex" style="flex-direction: row-reverse; margin-bottom: 30rpx;" @click="handleIsUpload">
				<view class="fontSize-15 color-FE3232" v-if="isUpload">编辑</view>
				<view class="fontSize-15 color-000" v-else>完成</view>
			</view>
			<!-- 列表 -->
			<view class="flex-alignItems-center bg-fff padding-30 border-radius20 margin-bottom30"
				v-for="(item,index) in list" :key="index" @click="chooseCartItem(item)">
				<view class="margin-right20">
					<image class="img-44" v-if="item.isSelect" src="@/static/image/14.png" mode=""></image>
					<image class="img-44" v-else src="@/static/image/15.png" mode=""></image>
				</view>
				<view class="flex-alignItems-center flex1">
					<image class="img-160 border-radius10 margin-right20" :src="item.image" mode="">
					</image>
					<view style="width: 100%;">
						<view class="fontSize-16 color-000 fontWeight-bold margin-bottom10">{{item.title}}</view>
						<view class="fontSize-15 color-999 margin-bottom10">{{item.item_name}}</view>
						<view class="flex-between">
							<view class="fontSize-15 color-FE3232 margin-right20" style="flex-shrink: 0;">
								<text class="fontSize-13 color-FE3232">积分:</text>
								{{item.sum_score}}
							</view>
							<u-number-box v-model="item.count">
								<view slot="minus" class="minus" @click="changeNumber(item)">
									<u-icon name="minus" size="12"></u-icon>
								</view>
								<text slot="input" style="width: 50px;text-align: center;"
									class="input">{{item.count}}</text>
								<view slot="plus" class="plus">
									<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
								</view>
							</u-number-box>
						</view>
					</view>
				</view>
			</view>
			<u-empty v-if="list.length == 0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"
				width="150px" height="150px" text="列表为空" textSize="18">
			</u-empty>
			<view style="padding-bottom: 100rpx;">
				<u-loadmore v-if="loading" status="loading" />
				<u-loadmore v-if="isLastPage" status="nomore" />
			</view>

			<!-- 底部操作栏 -->
			<view style="height: 150rpx;"></view>
			<view class="position-fixed-bottom bg-fff padding-30 flex-between">
				<view class="flex-alignItems-center" @click="chooseAllCart">
					<view class="margin-right20">
						<image class="img-44" v-if="allTotal" src="@/static/image/14.png" mode=""></image>
						<image class="img-44" v-else src="@/static/image/15.png" mode=""></image>
					</view>
					<view class="fontSize-13 color-000">
						实付款：<text class="fontSize-15 color-FE3232">{{totalPrice}}</text>
					</view>
				</view>
				<view v-if="isUpload" class="flex-center fontSize-14 color-fff btn20-967C5E-15fff20 width-100rpx"
				@click="confirmOrder">
					支付
				</view>
				<view v-else class="flex-center fontSize-14 color-fff btn-FC2020-15fff20 width-100rpx"
				@click="alldeleteCart">
					删除
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isUpload: true, // 是否编辑
				page: 1,
				limit: 10,
				list: [], // 购物车列表
				isLastPage: false,
				loading: false,
				value: 1,
				selectCartList: [] //选中购物车列表
			}
		},
		onShow() {
			this.page = 1
			this.limit = 10
			this.list = []
			this.cartList()
		},
		// 刷新 上拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.isLastPage = false
			this.list = []
			this.selectCartList = []
			this.cartList().finally(() => {
				// 停止当前页面下拉刷新
				uni.stopPullDownRefresh();
			});
		},
		// 加载下一页 下拉加载
		onReachBottom() {
			if (this.list.length >= this.page * this.limit) {
				this.isLastPage = false;
				this.page += 1;
				this.cartList();
			} else {
				this.isLastPage = true
			}
		},
		computed:{
			// 全选
			allTotal(){
				let allSelect = false
				if(this.selectCartList.length==0&&this.list.length==0){
					allSelect = false
				}else if(this.selectCartList.length&&this.list.length){
					allSelect = true
				}else{
					allSelect = false
				}
				return allSelect
			},
			// 计算金额
			totalPrice(){
				let allPrice = 0
				this.selectCartList.forEach(v=>{
					allPrice += Number(v.sum_score)*v.count
				})
				return Number(allPrice).toFixed(2)
			}
		},
		methods: {
			// 跳转到创建订单页面
			confirmOrder(){
				if(this.selectCartList.length==0){
					return this.$tools.toast('请选择购物车')
				}
				if (uni.getStorageSync('address_default')) {
					this.address = uni.getStorageSync('address_default')
				}
				let cartList = []
				cartList = this.selectCartList
				this.$tools.navigateTo('/pages/index/score-list/cart-confirm-order?cartList=' + JSON.stringify(cartList) + '&address=' + JSON.stringify(this.address))
			},
			// 选择购物车子项
			chooseCartItem(item){
				// 如果已选中
				// 获取某件商品的id
				// 判断该商品是否之前是被选中的
				let i = this.selectCartList.indexOf(item)
				// 之前是选中的，取消选中
				if (i > -1) {
					item.isSelect = false
					this.selectCartList.splice(i, 1)
				}else{
					// 如果没选中 添加选择数组，选择状态改为选择
					this.selectCartList.push(item)
					item.isSelect = true
				}
			},
			// 全选
			chooseAllCart(){
				if(this.list.length<1){
					return this.$tools.toast('请添加购物车')
				}else{
					// 判断是否是全选
					if(this.allTotal){
						// 全选清空选中数组
						this.selectCartList = []
						this.list.forEach(v=>{
							v.isSelect = false
						})
					}else{
						// 否则全部添加到选中数组
						this.selectCartList = []
						this.list.forEach(v=>{
							v.isSelect = true
							this.selectCartList.push(v)
						})
					}
				}
			},
			// 批量删除
			alldeleteCart(){
				if(this.list.length<1){
					return this.$tools.toast('请添加购物车')
				}
				let cartIds = []
				cartIds = this.selectCartList.map(v=>{
					return v.id
				})
				cartIds = cartIds.join(',')
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否批量删除该购物车',
					success: function (res) {
						if (res.confirm) {
							that.$http.post(that.$api.cart_del,{cart_id:cartIds}).then(res=>{
								if (res.code == 1) {
									uni.showToast({
										title: '删除成功',
										icon: 'none'
									})
									that.page = 1
									that.limit = 10
									that.list = []
									that.selectCartList = []
									that.cartList()
								}
							})
						} else if (res.cancel) {
							uni.showToast({
								title: '取消删除',
								icon: 'none'
							})
						}
					}
				});
			},
			// 单个商品删除
			async changeNumber(item) {
				let form = {
					goods_id: item.goods_id,
					spu_id: item.item_id,
					count: 1
				}
				let count = item.count - form.count
				if(count == 0){
					let that = this
					uni.showModal({
						title: '提示',
						content: '是否批量删除该购物车',
						success: function (res) {
							if (res.confirm) {
								that.$http.post(that.$api.cart_reduce,form).then(res=>{
									if (res.code == 1) {
										uni.showToast({
											title: '删除成功',
											icon: 'none'
										})
										that.page = 1
										that.limit = 10
										that.list = []
										that.selectCartList = []
										that.cartList()
									}
								})
							} else if (res.cancel) {
								uni.showToast({
									title: '取消删除',
									icon: 'none'
								})
							}
						}
					});
				}else{
					let res = await this.$http.post(this.$api.cart_reduce, form, {
						token: true
					})
				}
			},
			// 选择编辑/完成
			handleIsUpload() {
				this.isUpload = !this.isUpload
			},
			async cartList() {
				let res = await this.$http.post(this.$api.cart_list, {
					page: this.page,
					limit: this.limit,
					goods_type: 2
				}, {
					token: true
				})
				let cartList = []
				cartList = res.data.map(item => {
					return {
						cart_status: item.cart_status,
						count: item.count,
						deletetime: item.deletetime,
						goods_id: item.goods_id,
						id: item.id,
						isSelect: false,
						image: item.image,
						item_id: item.item_id,
						item_name: item.item_name,
						price: item.price,
						score: item.score,
						status: item.status,
						sum_price: item.sum_price,
						sum_score: item.sum_score,
						title: item.title
					}
				})
				this.list = [...this.list, ...cartList]
				console.log(this.list)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
		margin-right: 10rpx;
	}

	.input {
		padding: 0 10px;
		background-color: #f4f4f4;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		margin-left: 10rpx;
	}

	.upload-btn {
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		// background-color: #967C5E;
		font-size: 15px;
		color: #ffffff;
	}
</style>